<template>
    <el-dialog title="拆箱选择" :visible.sync="dialogForm" :modal="false" width="1100px">
        <el-form :inline="true" :model="condition" ref="condition" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：">
                        <select-port v-model="condition['search_EQ_portCode']"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名/航次：">
                        <auto-ship-voyage :portCode="condition['search_EQ_portCode']||''" :name="ch"
                                          @matchRecord="selectShipVoyage"></auto-ship-voyage>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱号：">
                        <el-input v-model="condition['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="尺寸：">
                        <auto-search-size v-model="condition['search_EQ_containerSize']"
                                          :name="condition['search_EQ_containerSize']"></auto-search-size>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型：">
                        <auto-search-entrust v-model="condition['search_EQ_containerType']"
                                             :name="condition['search_EQ_containerType']"></auto-search-entrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="提单号：">
                        <el-input v-model="condition['search_LIKE_billNumber']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-button @click="loadData" type="primary">查 询</el-button>
            <el-button @click="handleSelect">选 择</el-button>
        </el-form>
        <el-table :data="table" border stripe max-height="500" class="mt-10">
            <el-table-column fixed="left" prop="id" width="55">
                <template slot-scope="scope">
                    <el-radio v-model="radio" :label="scope.$index"></el-radio>
                </template>
            </el-table-column>
            <el-table-column type="index" fixed="left" label="序号" width="55" ></el-table-column>
            <el-table-column prop="shipName" label="船名"  min-width="120"></el-table-column>
            <el-table-column prop="voyage" label="航次"  min-width="120"></el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="120"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="120"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="120"></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="120"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="120"></el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
    import { getShipTallyContainer } from "@/api/shipPlan/shipPlan";
    import autoShipVoyage from '@/components/autocomplete/autoShipVoyage'
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import selectPort from '@/components/select/selectPort'

    export default {
        components: { autoShipVoyage, autoSearchEntrust, autoSearchSize,selectPort },
        data() {
            return {
                dialogForm: false,
                selectList: [],
                table: [],
                ch: '',
                condition: {},
                radio:''
            }
        },
        methods: {
            loadData() {
                const params = this.$assist.copySearchConditions(this.condition)
                getShipTallyContainer(params).then(res => {
                    this.table = res.data.aaData
                })
            },
            selectShipVoyage(item) {
                this.ch = `${item.SHIPNAME}/${item.VOYAGE}`
                this.condition['search_EQ_shipName'] = item.SHIPNAME
                this.condition['search_EQ_voyage'] = item.VOYAGE
            },
            handleSelect() {
                if (this.radio==='') {
                    this.$message({ message: '请先选择数据!', type: 'error' })
                    return
                }
                this.$emit('select', this.table[this.radio])
                this.dialogForm = false
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$parent.selectBox = false
                }
            }
        }
    }
</script>
